/* eslint-disable @typescript-eslint/no-explicit-any */
import PageWrapper from "@/Components/PageWrapper";
import { getComponent } from "@/Components/QuestionComponent";
import { getQuestionById } from "@/services/question";
import styles from "@/styles/Question.module.scss";

type PropsType = {
  errno: number;
  data?: {
    id: string;
    title: string;
    desc?: string;
    js?: string;
    css?: string;
    isPublished: boolean;
    isDeleted: boolean;
    componentList: Array<any>;
  };
  msg?: string;
};

export default function Question(props: PropsType) {
  const { errno, data, msg='' } = props;

  if (errno !== 0) {
    return (
      <PageWrapper title="错误">
        <h1>错误</h1>
        <p>{msg}</p>
      </PageWrapper>
    );
  }
  const { id, title = "", desc = "", isDeleted, isPublished,componentList=[]} = data||{};
  //已经删除 提示错误
  if (isDeleted) {
    return (
      <PageWrapper title={title} desc={desc}>
        <h1>{title}</h1>
        <p>该问卷已经被删除</p>
      </PageWrapper>
    );
  }
  //尚未发布 提示错误
  if (!isPublished) {
    return (
      <PageWrapper title={title} desc={desc}>
        <h1>{title}</h1>
        <p>该问卷尚未发布</p>
      </PageWrapper>
    );
  }
  //遍历组件
  const ComponentListElem = (
    <>
      {componentList.map(c => {
        const ComponentElem = getComponent(c);
        return (
          <div key={c.fe_id} className={styles.componentWrapper}>
            {ComponentElem}
          </div>
        );
      })}
    </>
  );
  return (
    <>
      <PageWrapper title={title} desc={desc}>
        <form action="/api/answer" method="post">
          <input type="hidden" name="questionId" value={id}></input>
          {ComponentListElem}
          <div className={styles.submitBtnContainer}>
            <button type="submit">提交</button>
          </div>
        </form>
      </PageWrapper>
    </>
  );
}
//每次请求时生成html
export async function getServerSideProps(context: any) {
  const { id='' } = context.params;
  //根据id 获取问卷数据
  const data = await getQuestionById(id);
  return {
    props: data,
  };
}
